<template>
  <el-dialog v-model="store.switchAdminFormVisible" title="切换管理员" width="30%" center>
    <el-form
        :rules="rules"
        ref="dom"
        :model="userMainWithCode"
    >
      <el-form-item label="ID :" label-width="100px">
        <el-input v-model="userMainWithCode.id" disabled type="text"/>
      </el-form-item>

      <el-form-item label="密码 :" prop="password" label-width="100px">
        <el-input v-model="userMainWithCode.password" type="password"/>
      </el-form-item>
      <el-form-item label="验证码 :" prop="mailCode" label-width="100px">
        <el-col :span="12">
          <el-input v-model="userMainWithCode.mailCode" style="max-width: 150px" type="text"/>
        </el-col>
        <el-col :span="12">
          <el-button v-if="isSend" class="cu-btn bg-green shadow" style="margin-left: 5%;width: 40%" disabled>
            {{ countdownTime }}s
          </el-button>
          <el-button v-else type="success" style="margin-left: 5%;width: 40%" @click="sendMail()"><el-text style="color: white" size="small">发送验证码</el-text></el-button>
        </el-col>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="store.switchAdminFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit(dom)">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {store} from "@/store";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import {inject, reactive, ref} from "vue";

const iinject = inject("reload")
const isSend = ref(false)
const countdownTime = ref(0)
const userMainWithCode = reactive({
  id: store.getLocalUserMain().id,
  mail: store.getLocalUserMain().mail,
  password:""
})
const dom = ref()

const rules = reactive({
  mailCode: [{required: true, message: '请输入验证码'}],
  password: [{required: true, message: '请输入密码'}],
})


const submit = (dom) => {
  dom.validate((isTrue) => {
    if (isTrue) {
      request.post("/store/loginUser", userMainWithCode).then(res => {
        if (res.code === 200) {
          store.setLocalStorage("rsms-token", res.data.token)
          store.removeLocalEmployeeMain()
          store.isAdmin=true
            store.auth=0
          store.switchAdminFormVisible = false
          iinject()
        } else
          ElMessage({
            message: res.message,
            type: 'error',
          })
      })
    } else {
      console.log("格式有误")
    }
  })
}

const sendMail = () => {
  if (userMainWithCode.password!==""){
    request.post("/store/loginUserOnSendMail", userMainWithCode).then(res => {
      if (res.code === 200) {
        isSend.value = true
        countdownTime.value = 60
        ElMessage({
          message: '已向绑定邮箱发送验证码',
          type: 'success',
        })
        let timer = setInterval(() => {
          countdownTime.value--;
          if (countdownTime.value < 1) {
            clearInterval(timer)
            countdownTime.value = 0
            isSend.value = false
          }
        }, 1000)
      } else {
        ElMessage({
          message: res.message,
          type: 'error',
        })
      }
    })
  }else {
    ElMessage({
      message: "请先输入密码",
      type: 'warning',
    })
  }

}
</script>

<style scoped>
.el-input {
  width: 200px;
}
</style>